<template>
    <div>
        <!-- 登录页面 -->
        <div class="content">
            <img src="../../assets/img_login/下载.jpg" style="width: 100%;">
            <div class="lg">
                <h3>用户登录</h3>
                <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                    <el-form-item label="手机号:" prop="shoujihao">
                        <el-input v-model="form.shoujihao"  placeholder="请输入手机号" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" prop="pwd">
                        <el-input placeholder="请输入密码" v-model="form.pwd" show-password></el-input>

                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn" type="primary" @click="submit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- <Foot></Foot> -->
    </div>
</template>

<script>
// import httpApi from "@/myaxios"
import httpApi from '@/myaxios'
export default {
    data() {
        return {
            form:{
                shoujihao: '',
                pwd: '',
            },
            rules:{
                shoujihao:[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {pattern:/^1[3-9]\d{9}$/, message: '长度为1-11位数的数字', trigger: 'blur' }
               ],
                pwd:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        pattern: /^\w{6,15}$/,
                        message: "6~15位字符，可以包含：数字、字母、下划线",
                        trigger: "blur"
                    }
                ]
            }

        }
    },

   methods:{
    submit(){
        this.$refs['form'].validate((valid)=>{
            // console.log(this.form);
            if(valid){
                httpApi.loginApi.login(this.form).then((res)=>{
                    // console.log(res.data);
                    if(res.data.length<=0){
                        this.$refs['form'].resetFields()
                        this.$message.error('密码或账号输入错误')
                        console.log(res);
                    }else{
                        this.$message.success("登录成功");
                        this.$router.push('/')
                        localStorage.setItem('userId',JSON.stringify(res.data[0].id))
                        localStorage.setItem('userShoujihao',JSON.stringify(res.data[0].shoujihao))
                    }
                })
            }else{
          this.$message.error('手机号或密码格式不正确')
        }
        })
        },
        // submit(form){
        //     this.$refs[form].resetFields();
        // console.log(submit);
        // },
    } 
}

</script>

<style lang="scss" scoped>

.content {
    position: relative;
}

.lg {
    // box-sizing: border-box;
    width: 370px;
    height: 350px;
    border-radius: 10%;
    position: absolute;
    top: 20%;
    left: 44%;
    background-color: rgba(255,255,255,0.1);
    box-shadow: 5px 5px 0 0 rgba(0,0,0,0.2);
    color: white;
    padding-right: 60px;

    >h3 {
        margin-top: 65px;
        margin-left: 40px;
    }
     
}

.btn {
    margin-right: 100px;
    width: 200px;

}
</style>